<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="public/temp :: CSS(~{::title},~{::style})">
    <title>合大田径俱乐部</title>
    <style></style>
</head>

<body>
<!--JQuery-->
<script src="/assets/js/jquery-3.6.0.min.js"></script>
<div class="wrapper">
    <!-- 菜单栏 -->
    <nav th:insert="~{public/temp :: Menu}"></nav>
    <!-- 主页面内容开始 -->
    <main class="page">
        <!--大屏人物-->
        <section class="page__intro intro" id="home">
            <div class="intro__container">
                <div class="intro__inner">
                    <div class="intro__content">
                        <h2 class="intro__suptitle" th:text="${mainContent.getScreenRedTitle()}"></h2>
                        <h1 class="intro__title" th:text="${mainContent.getScreenMainTitle()}"></h1>
                        <p class="intro__text" th:text="${mainContent.getScreenExplainContent()}"></p>
                        <div class="intro__buttons">
                            <a class="intro__button button button--border" data-modal="#elite"
                               href="#">招纳精英学子</a>
                        </div>
                    </div>
                    <div class="intro__image">
                        <img alt="Girl width dumbbels" th:src="${mainContent.getScreenManImg()}">
                    </div>
                </div>
            </div>
        </section>
        <!-- 简单介绍 -->
        <section class="page__features features" data-scrollspy="#features" id="features">
            <div class="features__container">
                <div class="features__inner">
                    <div class="features__body">
                        <div class="features__column" th:each="list:${homePromote}">
                            <div class="features__item item-features">
                                <h4 class="item-features__title" th:text="${list.getTitle()}"></h4>
                                <p class="item-features__text" th:text="${list.getContent()}"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 俱乐部的福利 -->
        <section class="page__programs programs">
            <div class="programs__container">
                <div class="programs__headline headline">
                    <h2 class="headline__title">好处是什么呢?</h2>
                    <h3 class="headline__subtitle">俱乐部的福利活动</h3>
                </div>
                <div class="programs__body">
                    <div class="programs__item item-program" th:each="welfare:${welfare}">
                        <div class="item-program__info">
                            <h4 class="item-program__title" th:text="${welfare.getTitle()}"></h4>
                            <p class="item-program__text" th:text="${welfare.getContent()}"></p>
                        </div>
                        <div class="item-program__image">
                            <img alt="image 1" th:src="${welfare.getImg()}">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 资讯健身方式 -->
        <section class="page__offer offer" data-scrollspy="#offer" id="offer">
            <div class="offer__container">
                <div class="offer__inner">
                    <div class="offer__content">
                        <h2 class="offer__title">咨询健身方式</h2>
                        <p class="offer__text">
                            我们有专业的指导教师和运动员进行贴身咨询,我们部分成员来自军区退伍,由他们代领指导下,你在大学的身体健康充满保证</p>
                        <button class="offer__button button" data-scroll="#contacts">加入我们</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 田径宣传照片 -->
        <section class="page__gallery gallery" data-scrollspy="#gallery" id="gallery">
            <div class="gallery__headline headline">
                <h2 class="headline__title">田径光辉</h2>
                <h3 class="headline__subtitle">田径俱乐部战斗时刻</h3>
            </div>
            <div class="gallery__items">
                <div class="gallery__item gallery__item--v3" th:each="photo:${promotionalPhotos}">
                    <img alt="image 7" th:src="${photo.getImg()}">
                </div>
            </div>
        </section>

        <!-- 训练方式 -->
        <section class="page__pricing pricing" id="soldier">
            <div class="pricing__container">
                <div class="pricing__headline headline">
                    <h2 class="headline__title">战士转职</h2>
                    <h3 class="headline__subtitle">选择你的称王之路</h3>
                </div>
                <div class="pricing__body">
                    <div class="pricing__column">
                        <div class="pricing__item item-pricing">
                            <h4 class="item-pricing__title">径赛</h4>
                            <div class="item-pricing__price">中短跑</div>
                            <ul class="item-pricing__list">
                                <li class="item-pricing__item">100米男女</li>
                                <li class="item-pricing__item">400米男女</li>
                                <li class="item-pricing__item">800米女</li>
                                <li class="item-pricing__item">1500米男女</li>
                            </ul>
                        </div>
                    </div>
                    <div class="pricing__column">
                        <div class="pricing__item pricing__item--padding item-pricing">
                            <h4 class="item-pricing__title">径赛</h4>
                            <div class="item-pricing__price">长跑(热)</div>
                            <ul class="item-pricing__list">
                                <li class="item-pricing__item">5公里</li>
                                <li class="item-pricing__item">10公里</li>
                                <li class="item-pricing__item">21公里-半程马拉松</li>
                                <li class="item-pricing__item">30公里-草原马拉松</li>
                                <li class="item-pricing__item">42.195公里-全程马拉松</li>
                            </ul>
                        </div>
                    </div>
                    <div class="pricing__column">
                        <div class="pricing__item item-pricing">
                            <h4 class="item-pricing__title">田赛</h4>
                            <div class="item-pricing__price">铁人项目</div>
                            <ul class="item-pricing__list">
                                <li class="item-pricing__item">掷铅球</li>
                                <li class="item-pricing__item">掷铁饼</li>
                                <li class="item-pricing__item">跳高</li>
                                <li class="item-pricing__item">立定跳远</li>
                                <li class="item-pricing__item">三级跳远</li>
                            </ul>
                        </div>
                    </div>
                    <a class="intro__button button" href="/activity#xunlian">精英计划详情</a>
                </div>
            </div>
        </section>
        <!-- 俱乐部明星 -->
        <section class="page__team team" data-scrollspy="#team" id="teamYear">
            <div class="team__headline headline">
                <h2 class="headline__title">2024年度至强至高会员</h2>
                <h3 class="headline__subtitle">田径榜样者</h3>
            </div>
            <div class="team__items slider-team">
                <div class="slider-team__item" th:each="member:${yearMembers}">
                    <div class="slider-team__img">
                        <img alt="Dianne Russell" th:src="${member.getImg()}">
                    </div>
                    <div class="slider-team__info">
                        <div class="slider-team__name" th:text="${member.getName()}"></div>
                        <h5 th:text="${member.getEName()}"></h5>
                        <div class="slider-team__more" style="padding:0 25px;">
                            <p class="slider-team__prof" th:text="${member.getStatus()}"></p>
                            <p class="slider-team__prof" th:text="${member.getIntroduce()}"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="page__team team" data-scrollspy="#team" id="team">
            <div class="team__headline headline">
                <h2 class="headline__title">俱乐部管理层</h2>
                <h3 class="headline__subtitle">田径先锋队</h3>
            </div>
            <div class="team__items slider-team">
                <div class="slider-team__item" th:each="member:${members}">
                    <div class="slider-team__img">
                        <img alt="Dianne Russell" th:src="${member.getImg()}">
                    </div>
                    <div class="slider-team__info">
                        <div class="slider-team__name" th:text="${member.getName()}"></div>
                        <h5 th:text="${member.getEName()}"></h5>
                        <div class="slider-team__more" style="padding:0 25px;">
                            <p class="slider-team__prof" th:text="${member.getStatus()}"></p>
                            <p class="slider-team__prof" th:text="${member.getIntroduce()}"></p>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <a class="offer__button button" href="/star">更多田径会员</a>
        </section>

        <!-- 加入俱乐部 -->
        <section class="page__contacts contacts" data-scrollspy="#contacts" id="contacts">
            <div class="contacts__container">
                <div class="contacts__inner">
                    <div class="contacts__details">
                        <h3 class="contacts__title">加入田径俱乐部</h3>
                        <h6 style="margin-bottom: 12px;">以下点击可以查看QQ二维码</h6>
                        <ul class="contacts__list">
                            <li class="contacts__item">
                                <a class="contacts__link contacts__link--phone" data-modal="#qqChairman" href="#">
                                    主任QQ:[[${mainContent.getContactsQq()}]]
                                </a>
                            </li>
                            <li class="contacts__item">
                                <a class="contacts__link contacts__link--email" data-modal="#qqTaf" href="#">
                                    俱乐部官方QQ号:[[${mainContent.getClubQq()}]]
                                </a>
                            </li>
                            <li class="contacts__item">
                                <a class="contacts__link contacts__link--address" data-modal="#qqGroup" href="#">
                                    俱乐部QQ群号:[[${mainContent.getClubGroup()}]]
                                </a>
                            </li>
                        </ul>
                        <ul class="contacts__social social">
                            <li class="social__item">
                                <a aria-label="Instagram" class="social__link"
                                   href="https://user.qzone.qq.com/1077684824">
                                    <img alt="instagram" class="social__icon"
                                         src="/assets/picture/qq-zone-icon.svg">
                                </a>
                            </li>
                            <li class="social__item">
                                俱乐部QQ空间
                            </li>
                        </ul>
<!--                        <div class="contacts__hours hours">-->
<!--                            <h5 class="hours__title">田径活动</h5>-->
<!--                            <ul class="hours__list">-->
<!--                                <li class="hours__item">-->
<!--                                    <span>-->
<!--                                        <text th:text="${#dates.format(mainContent.getExhibitionDateStart(), 'yyyy年MM月dd日')}"/>-->
<!--                                        - -->
<!--                                        <text th:text="${#dates.format(mainContent.getExhibitionDateEnd(), 'yyyy年MM月dd日')}"/>-->
<!--                                    </span>-->
<!--                                    [[${mainContent.getExhibitionLocate()}]]-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
                    </div>
                    <div class="contacts__message message" id="formIn">
                        <h4 class="message__title">填写报名表</h4>
                        <form th:action="@{/data/post/addClubMember}" method="post" id="form">
                            <!-- 必填字段 -->
                            <div class="form__group">
                                <input aria-label="User Name"
                                       class="form__input"
                                       name="name"
                                       id="name"
                                       placeholder="填写你的名称"
                                       required=""
                                       type="text"
                                >
                            </div>
                            <div class="form__group">
                                <input aria-label="User StuID"
                                       class="form__input"
                                       name="stuId"
                                       id="stuId"
                                       placeholder="填写你的学号"
                                       required=""
                                       type="number"
                                >
                            </div>
                            <div class="form__group">
                                <input aria-label="User Phone"
                                       class="form__input"
                                       name="phone"
                                       id="phone"
                                       placeholder="填写你的手机号"
                                       required=""
                                       type="number"
                                >
                            </div>
                            <div class="form__group">
                                <input aria-label="User Sex" name="radioSex" type="radio" value="男" checked>男士
                                <input aria-label="User Sex" name="radioSex" type="radio" value="女">女士
                            </div>
                            <div class="form__group">
                                <select aria-label="User College" id="college" class="form__select" name="college">
                                    <option value="none" selected disabled hidden>请选择所在学院</option>
                                    <option value="先进制造工程学院">先进制造工程学院</option>
                                    <option value="人工智能与大数据学院">人工智能与大数据学院</option>
                                    <option value="城市建设与交通学院">城市建设与交通学院</option>
                                    <option value="生物食品与环境学院">生物食品与环境学院</option>
                                    <option value="能源材料与化工学院">能源材料与化工学院</option>
                                    <option value="设计学院">设计学院</option>
                                    <option value="经济与管理学院">经济与管理学院</option>
                                    <option value="语言文化与传媒学院">语言文化与传媒学院</option>
                                    <option value="外国语学院">外国语学院</option>
                                    <option value="旅游与会展学院">旅游与会展学院</option>
                                    <option value="教育学院">教育学院</option>
                                    <option value="大众学院">大众学院</option>
                                </select>
                            </div>
                            <div class="form__group">
                                <input aria-label="User major"
                                       class="form__input"
                                       name="major"
                                       id="major"
                                       placeholder="填写你的专业"
                                       required=""
                                >
                            </div>
                            <div class="form__group" style="margin-bottom: 10px;">
                                <textarea aria-label="User Message"
                                          class="form__textarea"
                                          name="message"
                                          id="message"
                                          placeholder="浅谈你的运动过往"
                                          required=""
                                ></textarea>
                            </div>
                            <div class="buttonGodz2" onclick="SBCNMB()">点击报名</div>
                            <h6>
                                此项目为校园师生使用.请不要恶意填写信息,恶意填写信息将会被记录ip地址.过度恶劣行为将需要负法律责任!
                            </h6>
                        </form>
                        <!--验证数据是否异常和非法-->
                        <script>
                            function SBCNMB() {
                                //调用方式
                                $().getFuc();
                            }

                            $(function () {
                                $.fn.getFuc = function () {
                                    // 获取表单中的值
                                    const name = $('#name').val();
                                    const stuId = $('#stuId').val();
                                    const phone = $('#phone').val();
                                    const radioSex = $('input[name="radioSex"]:checked').val();
                                    const message = $('#message').val();
                                    const college = $('#college').val();
                                    const major = $('#major').val();

                                    // 打印表单值
                                    console.log("姓名: " + name, "学号: " + stuId, "手机号: " + phone, "性别: " + radioSex, "学院: " + college, "专业: " + major, "信息: " + message);

                                    // 检查姓名合法性和重复
                                    const isNameIllegal = /[0-9!@#$%^&*()_+{}\[\]:;<>,.?~\/\\]/.test(name);
                                    const isNameRepeated = /(.)\1{2,}/.test(name);
                                    if (isNameIllegal || isNameRepeated || name==='') {
                                        alert("名称非法或为空.请不要恶意填写信息.");
                                        return;
                                    }
                                    if (stuId.length < 9 || stuId.length > 12) {
                                        alert("请输入10-12位数字正确的学号,请不要恶意填写信息");
                                        return;
                                    }

                                    // 检查手机号长度和重复
                                    if (phone.length !== 11 || /(\d)\1{4,}/.test(phone)) {
                                        alert("请输入11位数字正确的手机号,请不要恶意填写信息");
                                        return;
                                    }

                                    // 检查学院选择
                                    if (!college) {
                                        alert("请选择所在学院");
                                        return;
                                    }

                                    // 确保专业名称只包含中文
                                    const isMajorChinese = /^[\u4e00-\u9fa5]+$/.test(major);

                                    if (!isMajorChinese) {
                                        alert("请输入正确的你所在的专业名称,请不要恶意填写信息");
                                        return;
                                    }

                                    // 提示确认信息
                                    const confirmationMessage = "亲爱的" + name + "同学,确认好了你的信息吗? 田径俱乐部欢迎你的加入!";
                                    if (confirm(confirmationMessage)) {
                                        $("#form").submit();
                                    }
                                }
                            })
                        </script>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- 底部信息 -->
    <nav th:insert="~{public/temp :: Detail}"></nav>
    <!-- 弹窗全家桶 -->
    <div class="modal" id="qqTaf">
        <div class="modal__inner callback">
            <button class="callback__close close" data-modal-close="">
                <svg class="close__icon" fill="none" height="20" viewbox="0 0 21 20" width="21"
                     xmlns="http://www.w3.org/2000/svg">
                    <path class="close__path"
                          d="M20.5 1.17833L19.3217 0L10.5 8.82167L1.67833 0L0.5 1.17833L9.32167 10L0.5 18.8217L1.67833 20L10.5 11.1783L19.3217 20L20.5 18.8217L11.6783 10L20.5 1.17833Z"
                          fill="#FDFDFD"/>
                </svg>
            </button>
            <h4 class="callback__title">俱乐部官方QQ(QQ扫码)</h4>
            <div class="gallery__item gallery__item--v3">
                <img alt="image 9" th:src="${mainContent.getClubQqQrcode()}">
                <div class="hours__item">
                    QQ号:[[${mainContent.getClubQq()}]]
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="qqGroup">
        <div class="modal__inner callback">
            <button class="callback__close close" data-modal-close="">
                <svg class="close__icon" fill="none" height="20" viewbox="0 0 21 20" width="21"
                     xmlns="http://www.w3.org/2000/svg">
                    <path class="close__path"
                          d="M20.5 1.17833L19.3217 0L10.5 8.82167L1.67833 0L0.5 1.17833L9.32167 10L0.5 18.8217L1.67833 20L10.5 11.1783L19.3217 20L20.5 18.8217L11.6783 10L20.5 1.17833Z"
                          fill="#FDFDFD"/>
                </svg>
            </button>
            <h4 class="callback__title">俱乐部QQ群(QQ扫码)</h4>
            <div class="gallery__item gallery__item--v3">
                <img alt="image 9" th:src="${mainContent.getClubGroupQrcode()}">
                <div class="hours__item">
                    QQ群号:[[${mainContent.getClubGroup()}]]
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="qqChairman">
        <div class="modal__inner callback">
            <button class="callback__close close" data-modal-close="">
                <svg class="close__icon" fill="none" height="20" viewbox="0 0 21 20" width="21"
                     xmlns="http://www.w3.org/2000/svg">
                    <path class="close__path"
                          d="M20.5 1.17833L19.3217 0L10.5 8.82167L1.67833 0L0.5 1.17833L9.32167 10L0.5 18.8217L1.67833 20L10.5 11.1783L19.3217 20L20.5 18.8217L11.6783 10L20.5 1.17833Z"
                          fill="#FDFDFD"/>
                </svg>
            </button>
            <h4 class="callback__title">俱乐部主任QQ(QQ扫码)</h4>
            <div class="gallery__item gallery__item--v3">
                <img alt="image 9" th:src="${mainContent.getContactsQqQrcode()}">
                <div class="hours__item">
                    <span>主任QQ号:[[${mainContent.getContactsQq()}]]</span>
                </div>
            </div>
        </div>
    </div>
    <!--精英计划-->
    <div class="modal" id="elite">
        <div class="modal__inner callback">
            <button class="callback__close close" data-modal-close="">
                <svg class="close__icon" fill="none" height="20" viewbox="0 0 21 20" width="21"
                     xmlns="http://www.w3.org/2000/svg">
                    <path class="close__path"
                          d="M20.5 1.17833L19.3217 0L10.5 8.82167L1.67833 0L0.5 1.17833L9.32167 10L0.5 18.8217L1.67833 20L10.5 11.1783L19.3217 20L20.5 18.8217L11.6783 10L20.5 1.17833Z"
                          fill="#FDFDFD"/>
                </svg>
            </button>
            <h4 class="callback__title">精英计划</h4>
            <h5>
                军队退伍,拥有市级以上体育比赛奖项,特殊高水平运动能力的超级精英学子,将可以免试入驻田径俱乐部,并且拥有优先参加省级大学生运动会,马拉松比赛等资格.属于田径俱乐部荣誉会员.
            </h5>
            <div class="gallery__item gallery__item--v3">
                <img alt="image 9" th:src="${mainContent.getContactsQqQrcode()}">
                <div class="hours__item">
                    <span>请打开QQ扫描二维码,直接联系俱乐部主任</span>
                    QQ:[[${mainContent.getContactsQq()}]]
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Js仓库 -->
<nav th:insert="~{public/temp :: JavaScript}"></nav>

</body>
</html>
